// acupoints.js
Page({
  data: {
    currentCategory: 1, // 默认选择成人穴位
    currentView: 'front', // 当前视图：front, side, back
    currentViewImage: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
    selectedMeridian: null, // 当前选中的经络
    meridianList: [
      { id: 'lung', name: '肺经', color: '#1890ff' },
      { id: 'large-intestine', name: '大肠经', color: '#ff4d4f' },
      { id: 'stomach', name: '胃经', color: '#52c41a' },
      { id: 'spleen', name: '脾经', color: '#faad14' },
      { id: 'heart', name: '心经', color: '#722ed1' },
      { id: 'small-intestine', name: '小肠经', color: '#fa8c16' },
      { id: 'bladder', name: '膀胱经', color: '#13c2c2' },
      { id: 'kidney', name: '肾经', color: '#eb2f96' },
      { id: 'pericardium', name: '心包经', color: '#f5222d' },
      { id: 'triple-warmer', name: '三焦经', color: '#52c41a' },
      { id: 'gallbladder', name: '胆经', color: '#faad14' },
      { id: 'liver', name: '肝经', color: '#722ed1' },
      { id: 'du', name: '督脉', color: '#1890ff' },
      { id: 'ren', name: '任脉', color: '#ff4d4f' }
    ],
    currentMeridianPaths: [],
    currentAcupoints: [],
    showDynamicEffect: false
  },

  onLoad() {
    console.log('穴位学习页面加载')
    console.log('当前图片URL:', this.data.currentViewImage)
    
    // 测试图片是否能加载
    wx.getImageInfo({
      src: this.data.currentViewImage,
      success: (res) => {
        console.log('图片加载成功:', res)
      },
      fail: (err) => {
        console.error('图片加载失败:', err)
      }
    })
  },

  // 更新当前显示的图片
  updateCurrentImage() {
    let newImage = ''
    
    if (this.data.currentCategory === 1) { // 成人穴位
      if (this.data.currentView === 'front') {
        newImage = 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png'
      } else if (this.data.currentView === 'side') {
        newImage = 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png'
      } else if (this.data.currentView === 'back') {
        newImage = 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
      }
    } else { // 儿童穴位
      if (this.data.currentView === 'front') {
        newImage = 'http://39.97.48.169:9000/zhongyi/u7348.png'
      } else if (this.data.currentView === 'side') {
        newImage = 'http://39.97.48.169:9000/zhongyi/u7348.png'
      } else if (this.data.currentView === 'back') {
        newImage = 'http://39.97.48.169:9000/zhongyi/u7363.png'
      }
    }
    
    console.log('更新图片:', this.data.currentCategory, this.data.currentView, newImage)
    
    this.setData({
      currentViewImage: newImage
    })
  },

  // 分类点击事件
  onCategoryTap(e) {
    const categoryId = parseInt(e.currentTarget.dataset.id)
    console.log('点击分类:', categoryId)
    
    // 切换成人/儿童穴位
    this.setData({ 
      currentCategory: categoryId
    })
    
    this.updateCurrentImage()
  },

  // 选择经络
  selectMeridian(e) {
    const meridian = e.currentTarget.dataset.meridian
    console.log('选择经络:', meridian)
    
    this.setData({
      selectedMeridian: meridian.id
    })
    
    // 显示经络路径和穴位
    this.showMeridianPath(meridian.id)
  },

  // 显示经络路径
  showMeridianPath(meridianId) {
    const paths = this.getMeridianPaths(meridianId)
    const acupoints = this.getMeridianAcupoints(meridianId)
    
    this.setData({
      currentMeridianPaths: paths,
      currentAcupoints: acupoints
    })
    
    // 触发路径动画
    setTimeout(() => {
      this.animateMeridianPath()
    }, 100)
  },

  // 获取经络路径数据
  getMeridianPaths(meridianId) {
    const pathData = {
      'lung': [
        { id: 1, className: 'lung-path', style: 'left: 35%; top: 18%; width: 10%; height: 3px; transform: rotate(2deg);' },
        { id: 2, className: 'lung-path', style: 'left: 38%; top: 28%; width: 7%; height: 3px; transform: rotate(-1deg);' },
        { id: 3, className: 'lung-path', style: 'left: 39%; top: 35%; width: 5%; height: 3px; transform: rotate(1deg);' }
      ],
      'heart': [
        { id: 1, className: 'heart-path', style: 'left: 45%; top: 18%; width: 8%; height: 3px; transform: rotate(1deg);' },
        { id: 2, className: 'heart-path', style: 'left: 46%; top: 26%; width: 6%; height: 3px; transform: rotate(-2deg);' },
        { id: 3, className: 'heart-path', style: 'left: 47%; top: 34%; width: 5%; height: 3px; transform: rotate(1deg);' }
      ],
      'stomach': [
        { id: 1, className: 'stomach-path', style: 'left: 30%; top: 10%; width: 15%; height: 3px; transform: rotate(6deg);' },
        { id: 2, className: 'stomach-path', style: 'left: 32%; top: 13%; width: 12%; height: 3px; transform: rotate(-1deg);' },
        { id: 3, className: 'stomach-path', style: 'left: 34%; top: 16%; width: 9%; height: 3px; transform: rotate(2deg);' }
      ],
      'du': [
        { id: 1, className: 'du-path', style: 'left: 50%; top: 5%; width: 3px; height: 65%; transform: translateX(-50%);' }
      ],
      'ren': [
        { id: 1, className: 'ren-path', style: 'left: 50%; top: 7%; width: 3px; height: 42%; transform: translateX(-50%);' }
      ],
      'large-intestine': [
        { id: 1, className: 'large-intestine-path', style: 'left: 22%; top: 48%; width: 12%; height: 3px; transform: rotate(12deg);' },
        { id: 2, className: 'large-intestine-path', style: 'left: 26%; top: 52%; width: 8%; height: 3px; transform: rotate(-1deg);' }
      ],
      'spleen': [
        { id: 1, className: 'spleen-path', style: 'left: 38%; top: 22%; width: 8%; height: 3px; transform: rotate(2deg);' },
        { id: 2, className: 'spleen-path', style: 'left: 42%; top: 26%; width: 6%; height: 3px; transform: rotate(-2deg);' }
      ],
      'small-intestine': [
        { id: 1, className: 'small-intestine-path', style: 'left: 78%; top: 48%; width: 8%; height: 3px; transform: rotate(-1deg);' },
        { id: 2, className: 'small-intestine-path', style: 'left: 76%; top: 50%; width: 6%; height: 3px; transform: rotate(3deg);' }
      ],
      'bladder': [
        { id: 1, className: 'bladder-path', style: 'left: 30%; top: 10%; width: 12%; height: 3px; transform: rotate(12deg);' },
        { id: 2, className: 'bladder-path', style: 'left: 32%; top: 12%; width: 8%; height: 3px; transform: rotate(-2deg);' },
        { id: 3, className: 'bladder-path', style: 'left: 34%; top: 14%; width: 6%; height: 3px; transform: rotate(1deg);' }
      ],
      'kidney': [
        { id: 1, className: 'kidney-path', style: 'left: 36%; top: 26%; width: 8%; height: 3px; transform: rotate(3deg);' },
        { id: 2, className: 'kidney-path', style: 'left: 40%; top: 30%; width: 6%; height: 3px; transform: rotate(-1deg);' }
      ],
      'pericardium': [
        { id: 1, className: 'pericardium-path', style: 'left: 46%; top: 18%; width: 6%; height: 3px; transform: rotate(1deg);' },
        { id: 2, className: 'pericardium-path', style: 'left: 48%; top: 24%; width: 5%; height: 3px; transform: rotate(-2deg);' }
      ],
      'triple-warmer': [
        { id: 1, className: 'triple-warmer-path', style: 'left: 52%; top: 16%; width: 6%; height: 3px; transform: rotate(-1deg);' },
        { id: 2, className: 'triple-warmer-path', style: 'left: 56%; top: 22%; width: 5%; height: 3px; transform: rotate(3deg);' }
      ],
      'gallbladder': [
        { id: 1, className: 'gallbladder-path', style: 'left: 28%; top: 10%; width: 10%; height: 3px; transform: rotate(10deg);' },
        { id: 2, className: 'gallbladder-path', style: 'left: 30%; top: 14%; width: 7%; height: 3px; transform: rotate(-1deg);' },
        { id: 3, className: 'gallbladder-path', style: 'left: 32%; top: 18%; width: 5%; height: 3px; transform: rotate(2deg);' }
      ],
      'liver': [
        { id: 1, className: 'liver-path', style: 'left: 37%; top: 62%; width: 6%; height: 3px; transform: rotate(2deg);' },
        { id: 2, className: 'liver-path', style: 'left: 39%; top: 64%; width: 5%; height: 3px; transform: rotate(-1deg);' }
      ]
    }
    
    return pathData[meridianId] || []
  },

  // 获取经络穴位数据
  getMeridianAcupoints(meridianId) {
    const acupointData = {
      'lung': [
        { id: 1, name: '中府', x: 35, y: 18, className: 'lung-point' },
        { id: 2, name: '云门', x: 37, y: 20, className: 'lung-point' },
        { id: 3, name: '天府', x: 38, y: 28, className: 'lung-point' },
        { id: 4, name: '侠白', x: 39, y: 35, className: 'lung-point' },
        { id: 5, name: '尺泽', x: 40, y: 45, className: 'lung-point' }
      ],
      'heart': [
        { id: 1, name: '极泉', x: 45, y: 18, className: 'heart-point' },
        { id: 2, name: '青灵', x: 46, y: 26, className: 'heart-point' },
        { id: 3, name: '少海', x: 47, y: 34, className: 'heart-point' },
        { id: 4, name: '灵道', x: 48, y: 40, className: 'heart-point' },
        { id: 5, name: '通里', x: 49, y: 46, className: 'heart-point' }
      ],
      'stomach': [
        { id: 1, name: '承泣', x: 30, y: 10, className: 'stomach-point' },
        { id: 2, name: '四白', x: 32, y: 13, className: 'stomach-point' },
        { id: 3, name: '巨髎', x: 34, y: 16, className: 'stomach-point' },
        { id: 4, name: '地仓', x: 36, y: 19, className: 'stomach-point' },
        { id: 5, name: '大迎', x: 38, y: 22, className: 'stomach-point' }
      ],
      'du': [
        { id: 1, name: '百会', x: 50, y: 5, className: 'du-point' },
        { id: 2, name: '大椎', x: 50, y: 17, className: 'du-point' },
        { id: 3, name: '命门', x: 50, y: 45, className: 'du-point' },
        { id: 4, name: '腰阳关', x: 50, y: 55, className: 'du-point' },
        { id: 5, name: '长强', x: 50, y: 70, className: 'du-point' }
      ],
      'ren': [
        { id: 1, name: '承浆', x: 50, y: 9, className: 'ren-point' },
        { id: 2, name: '廉泉', x: 50, y: 14, className: 'ren-point' },
        { id: 3, name: '天突', x: 50, y: 18, className: 'ren-point' },
        { id: 4, name: '膻中', x: 50, y: 28, className: 'ren-point' },
        { id: 5, name: '关元', x: 50, y: 48, className: 'ren-point' }
      ],
      'large-intestine': [
        { id: 1, name: '商阳', x: 22, y: 48, className: 'large-intestine-point' },
        { id: 2, name: '二间', x: 24, y: 50, className: 'large-intestine-point' },
        { id: 3, name: '三间', x: 26, y: 52, className: 'large-intestine-point' },
        { id: 4, name: '合谷', x: 28, y: 54, className: 'large-intestine-point' },
        { id: 5, name: '阳溪', x: 30, y: 56, className: 'large-intestine-point' }
      ],
      'spleen': [
        { id: 1, name: '隐白', x: 38, y: 22, className: 'spleen-point' },
        { id: 2, name: '大都', x: 42, y: 26, className: 'spleen-point' },
        { id: 3, name: '太白', x: 46, y: 30, className: 'spleen-point' },
        { id: 4, name: '公孙', x: 50, y: 34, className: 'spleen-point' },
        { id: 5, name: '商丘', x: 54, y: 38, className: 'spleen-point' }
      ],
      'small-intestine': [
        { id: 1, name: '少泽', x: 78, y: 48, className: 'small-intestine-point' },
        { id: 2, name: '前谷', x: 76, y: 50, className: 'small-intestine-point' },
        { id: 3, name: '后溪', x: 74, y: 52, className: 'small-intestine-point' },
        { id: 4, name: '腕骨', x: 72, y: 54, className: 'small-intestine-point' },
        { id: 5, name: '阳谷', x: 70, y: 56, className: 'small-intestine-point' }
      ],
      'bladder': [
        { id: 1, name: '睛明', x: 30, y: 10, className: 'bladder-point' },
        { id: 2, name: '攒竹', x: 32, y: 12, className: 'bladder-point' },
        { id: 3, name: '眉冲', x: 34, y: 14, className: 'bladder-point' },
        { id: 4, name: '曲差', x: 36, y: 16, className: 'bladder-point' },
        { id: 5, name: '五处', x: 38, y: 18, className: 'bladder-point' }
      ],
      'kidney': [
        { id: 1, name: '涌泉', x: 36, y: 26, className: 'kidney-point' },
        { id: 2, name: '然谷', x: 40, y: 30, className: 'kidney-point' },
        { id: 3, name: '太溪', x: 44, y: 34, className: 'kidney-point' },
        { id: 4, name: '大钟', x: 48, y: 38, className: 'kidney-point' },
        { id: 5, name: '水泉', x: 52, y: 42, className: 'kidney-point' }
      ],
      'pericardium': [
        { id: 1, name: '天池', x: 46, y: 18, className: 'pericardium-point' },
        { id: 2, name: '天泉', x: 48, y: 24, className: 'pericardium-point' },
        { id: 3, name: '曲泽', x: 50, y: 30, className: 'pericardium-point' },
        { id: 4, name: '郄门', x: 52, y: 36, className: 'pericardium-point' },
        { id: 5, name: '间使', x: 54, y: 42, className: 'pericardium-point' }
      ],
      'triple-warmer': [
        { id: 1, name: '关冲', x: 52, y: 16, className: 'triple-warmer-point' },
        { id: 2, name: '液门', x: 56, y: 22, className: 'triple-warmer-point' },
        { id: 3, name: '中渚', x: 60, y: 26, className: 'triple-warmer-point' },
        { id: 4, name: '阳池', x: 64, y: 32, className: 'triple-warmer-point' },
        { id: 5, name: '外关', x: 68, y: 36, className: 'triple-warmer-point' }
      ],
      'gallbladder': [
        { id: 1, name: '瞳子髎', x: 28, y: 10, className: 'gallbladder-point' },
        { id: 2, name: '听会', x: 30, y: 14, className: 'gallbladder-point' },
        { id: 3, name: '上关', x: 32, y: 18, className: 'gallbladder-point' },
        { id: 4, name: '颔厌', x: 34, y: 22, className: 'gallbladder-point' },
        { id: 5, name: '悬颅', x: 36, y: 26, className: 'gallbladder-point' }
      ],
      'liver': [
        { id: 1, name: '大敦', x: 37, y: 62, className: 'liver-point' },
        { id: 2, name: '行间', x: 39, y: 64, className: 'liver-point' },
        { id: 3, name: '太冲', x: 41, y: 66, className: 'liver-point' },
        { id: 4, name: '中封', x: 43, y: 68, className: 'liver-point' },
        { id: 5, name: '蠡沟', x: 45, y: 70, className: 'liver-point' }
      ]
    }
    
    return acupointData[meridianId] || []
  },

  // 经络路径动画
  animateMeridianPath() {
    console.log('经络路径动画开始')
    
    // 添加动态效果控制
    setTimeout(() => {
      this.setData({
        showDynamicEffect: true
      })
    }, 2000)
  },

  // 切换动态效果
  toggleDynamicEffect() {
    this.setData({
      showDynamicEffect: !this.data.showDynamicEffect
    })
  },

  // 显示穴位详情
  showAcupointDetail(e) {
    const acupoint = e.currentTarget.dataset.acupoint
    console.log('穴位详情:', acupoint)
    
    wx.showModal({
      title: acupoint.name,
      content: `这是${acupoint.name}穴位的详细信息`,
      showCancel: false
    })
  },

  // 切换视图
  switchView(e) {
    const view = e.currentTarget.dataset.view
    console.log('切换视图:', view)
    
    this.setData({
      currentView: view
    })
    
    this.updateCurrentImage()
  },

  // 返回上一页
  goBack() {
    wx.navigateBack()
  },

  // 图片加载成功
  onImageLoad(e) {
    console.log('图片加载成功:', e)
  },

  // 图片加载失败
  onImageError(e) {
    console.error('图片加载失败:', e)
    wx.showToast({
      title: '图片加载失败',
      icon: 'error'
    })
  }
})
